<template>
    <div class="production-management">
      <page>
        <div slot="body">
          <div>
            <div class="line"></div>
            <!-- <div style="font-size: 15px; font-weight: 600">产品总生产目标</div>
            <el-form class="form" label-width="140px" inline>
              <el-form-item class="form-item" label="设计总需求量：" prop="name">
                <el-input v-model="total" placeholder="" disabled size="small" />
                <i class="el-icon-edit" @click="edit(1)"></i>
              </el-form-item>
              <el-form-item class="form-item" label="设计完成时间：" prop="name">
                <el-input v-model="time" placeholder="" disabled size="small" />
                <i class="el-icon-edit" @click="edit(2)"></i>
              </el-form-item>
            </el-form> -->
            <div style="text-align: right;">
              <el-radio-group v-model="value1" @input="radioInput">
                <el-radio-button v-for="(item, index) in list1" :label="item.code" :key="index">{{item.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div style="margin-bottom:  10px;">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd"> 添加产品 </el-button>
          </div>
          <el-table :data="tableData" border>
            <el-table-column label="序号" type="index" width="50px"></el-table-column>
            <el-table-column label="产品ID" prop="prodCode"></el-table-column>
            <el-table-column label="所属隧道" prop="tunnel"></el-table-column>
            <el-table-column label="隧道部位" prop="tunnelArea">
              <template slot-scope="scope">
                <span>{{
                  (statusOptions.find(item => item.dictValue == scope.row.unit) || {}).dictLabel || scope.row.tunnelArea
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工字钢类型" prop="steel"></el-table-column>
            <el-table-column label="单元" prop="unit">
              <template slot-scope="scope">
                <span>{{
                  (unitList.find(item => item.dictValue == scope.row.unit) || {}).dictLabel || scope.row.unit
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="大样图" prop="image" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="100px">
              <template slot-scope="scope">
                <el-link type="primary" @click="handleEdit(scope.row)" :underline="false">编辑</el-link>
                <el-link type="primary" @click="handleDelete(scope.row)" :underline="false">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <el-form-item label="设计总需求量：" prop="prodNum" v-if="num == 1">
              <el-input v-model="form.prodNum" placeholder="设计总需求量：" />
            </el-form-item>
            <el-form-item label="设计完成时间：" prop="finishDate" v-if="num == 2">
              <el-date-picker v-model="form.finishDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="prodTitle" :close-on-click-modal="false" :visible.sync="openProd" width="800px" append-to-body>
          <el-form ref="prodForm" :model="prodForm" :rules="prodRules" label-width="140px">
            <el-form-item label="所属隧道：" prop="tunnel">
              <el-input v-model="prodForm.tunnel" placeholder="请输入所属隧道" />
            </el-form-item>
            <el-form-item label="隧道部位：" prop="tunnelArea">
              <el-select v-model="prodForm.tunnelArea" placeholder="请选择隧道部位">
                <el-option v-for="dict in statusOptions" :key="dict.id" :label="dict.dictLabel" :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="工字钢类型：" prop="steel">
              <el-input v-model="prodForm.steel" placeholder="请输入工字钢类型" />
            </el-form-item>
            <el-form-item label="单元：" prop="unit">
              <el-select v-model="prodForm.unit" placeholder="请选择单元">
                <el-option v-for="dict in unitList" :key="dict.id" :label="dict.dictLabel" :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="上传文件：">
              <el-upload
                :action="uploadFileUrl"
                :file-list="fileList"
                :limit="1"
                :on-error="handleUploadError"
                :on-exceed="handleExceed"
                :on-success="handleUploadSuccess"
                :show-file-list="false"
                :headers="headers"
                class="upload-file-uploader"
                ref="upload"
              >
                <!-- 上传按钮 -->
                <el-button size="mini" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitProdForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <!-- <div slot="footer">
          <el-pagination
            background
            :page-size="pageVO.pageSize"
            :current-page.sync="pageVO.pageNum"
            :total="pageVO.total"
            :layout="pageOptions.layout"
            :page-sizes="pageOptions.pageSizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->
      </page>
    </div>
  </template>
  
  <script>
  import { getProdPlan, addProdPlan, getList, getDicts, updateProd, deleteProd, getprolist } from '@/api/product';
  import { getToken } from '@/utils/auth';
  import pageQuery from '../../mixins/pageQuery';
  export default {
    mixins: [pageQuery],
    data() {
      return {
        form: {
          prodNum: '',
          finishDate: '',
          id: '',
        },
        list1: [],
        value1: 'ggj',
        prodForm: {},
        open: false,
        openProd: false,
        total: '',
        time: '',
        title: '',
        prodTitle: '',
        tableData: [],
        areaList: [],
        statusOptions: [],
        unitList: [],
        num: 0,
        rules: {
          prodNum: [{ required: true, message: '设计总需求量不能为空', trigger: 'blur' }],
          finishDate: [{ required: true, message: '设计完成时间不能为空', trigger: 'blur' }],
        },
        prodRules: {
          tunnel: [{ required: true, message: '请输入所属隧道', trigger: 'blur' }],
          tunnelArea: [{ required: true, message: '请选择隧道区域', trigger: 'chage' }],
          steel: [{ required: true, message: '请输入工字钢类型', trigger: 'blur' }],
          unit: [{ required: true, message: '请选择单元', trigger: 'chage' }],
          // upload:[
          //   { required: true, message: "", trigger: "chage" }
          // ]
        },
        uploadFileUrl: process.env.VUE_APP_BASE_API + '/steel-arch/client/file/upload', // 上传的图片服务器地址
        headers: {
          Authorization: 'Bearer ' + getToken(),
        },
        fileList: [],
      };
    },
    created() {
      this.getprolist()
      this.getplan();
      this.getTableData();
      const { projectId } = this.$store.getters;
      this.prodForm.projectId = projectId;
      getDicts({ dictType: 'sys_tunnel_area' }).then(res => {
        this.statusOptions = res.data.data;
      });
      getDicts({ dictType: 'sys_prod_unit' }).then(res => {
        this.unitList = res.data.data;
      });
    },
    methods: {
      getplan() {
        const { projectId } = this.$store.getters;
        getProdPlan(projectId).then(res => {
          this.total = res.data.prodNum;
          this.time = res.data.finishDate;
          (this.form.prodNum = res.data.prodNum), (this.form.finishDate = res.data.finishDate);
          this.form.id = res.data.id;
        });
      },
      getprolist() {
        getprolist().then(res =>{
          if(res.success == true){
            this.list1 = res.data
          }
        })
      },
      radioInput(e){
        this.getTableData()
      },
      getTableData() {
        const { projectId } = this.$store.getters;
        const parmas = {
          projectId: projectId,
          prodType: this.value1,
        };
        getList(parmas).then(res => {
          this.tableData = res.data;
        });
      },
      edit(num) {
        this.open = true;
        if (num == 1) {
          this.title = '设计总需求量修改';
          this.num = 1;
        } else {
          this.title = '设计完成时间修改';
          this.num = 2;
        }
      },
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            const { projectId } = this.$store.getters;
            this.form.projectId = projectId;
            addProdPlan(this.form).then(response => {
              this.$message.success('修改成功');
              this.open = false;
              this.getplan();
              this.getTableData();
            });
          }
        });
      },
      submitProdForm: function () {
        this.$refs['prodForm'].validate(valid => {
          if (valid) {
            if (this.prodForm.id != null) {
              updateProd(this.prodForm).then(response => {
                this.$message.success('修改成功');
                this.openProd = false;
                this.getTableData();
              });
            } else {
              updateProd(this.prodForm).then(response => {
                this.$message.success('新增成功');
                this.openProd = false;
                this.getTableData();
              });
            }
          }
        });
      },
      cancel() {
        this.open = false;
        this.$refs.prodForm.resetFields();
        this.openProd = false;
      },
      handleAdd() {
        this.openProd = true;
        this.prodTitle = '添加产品';
        this.prodForm={}
      },
      // 文件个数超出
      handleExceed() {
        this.$message.error(`只允许上传单个文件`);
      },
      // 上传失败
      handleUploadError(err) {
        this.$message.error('上传失败, 请重试');
      },
      // 上传成功回调
      handleUploadSuccess(res, file) {
        this.$message.success('上传成功');
        this.prodForm.image = res.data;
      },
      // 删除文件
      handleDelete(index) {
        //this.fileList.splice(index, 1);
      },
      handleEdit(row) {
        this.openProd = true;
        this.prodForm = row;
        const { projectId } = this.$store.getters;
        this.prodForm.projectId = projectId;
      },
      handleDelete(row) {
        this.$confirm('是否确认删除产品ID为"' + row.prodCode + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return deleteProd(row.id);
          })
          .then(() => {
            this.getTableData();
            this.$message.success('删除成功');
          });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .top {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;
  }
  
  .line {
    width: 8px;
    background: #1890ff;
    margin-right: 15px;
  }
  .form {
    display: flex;
    margin-top: 10px;
    ::v-deep {
      .el-form-item__label {
        font-weight: normal;
      }
    }
  }
  .form-item {
    position: relative;
  }
  .el-icon-edit {
    font-size: 20px;
    right: 10px;
    position: absolute;
    top: 8px;
  }
  </style>
  